<template>
  <div class="unionActivity flex flex-col">
    <a-form layout="inline" size="small" :model="listParams">
      <a-form-item field="platformId">
        <a-select placeholder="请选择平台" v-model="listParams.platformId" @change="changeCurrent(1)">
          <a-option v-for="item in platformList" :key="item.platformId" :value="item.platformId">{{
            item.title
          }}</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="keyword" style="width: 350">
        <a-input
          v-model="listParams.keyword"
          placeholder="请输入"
          allow-clear
          @press-enter="changeCurrent(1)"
          @clear="changeCurrent(1)"
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="changeCurrent(1)">
            <template #icon> <icon-search /> </template>
            <span>搜索</span>
          </a-button>
          <a-button plain @click="onResetSearch()">
            <template #icon>
              <icon-sync />
            </template>
            <span>重置</span>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="px-8 my-6">
      <template v-if="listParams.activityType == 1">
        <a-alert>
          展示各个平台官方活动，均通过官方接口进行转链，用户点击将直接跳转至相应平台APP，可正常跟单锁佣！</a-alert
        >
      </template>
      <template v-else-if="listParams.activityType == 2">
        <a-alert>
          此模块自带APP内分享功能，可实现APP中打开活动专题，主会场+分会场活动展示形式(若无分会场仅展示主会场)，用户在APP端点击可直接可直接唤醒对应APP活动着陆页，也可分享活动专题海报二维码图、活动专题链接、活动专题口令等功能，包含淘宝、京东、拼多多、唯品会等多平台活动类型，由平台定期提供更新！</a-alert
        >
      </template>
      <template v-else-if="listParams.activityType == 3">
        <a-alert> 可前往个性化-自定义联盟活动中创建活动，一般用于后台专题活动无法满足自身需求时可创建该活动！</a-alert>
      </template>
    </div>
    <div class="flex flex-1" :style="{ overflowY: 'scroll' }">
      <a-spin :loading="loading" class="w-full h-full">
        <div class="card_wrapper flex flex-wrap flex-1">
          <a-card
            :hoverable="true"
            v-for="(item, index) in tableData"
            :key="index"
            class="m-6 card_item w-71n round-10 overflow-hidden"
            :class="item.id == checkedValue ? 'checked' : ''"
          >
            <template #cover>
              <div class="w-full overflow-hidden m-relative">
                <a-image
                  width="100%"
                  height="118"
                  :src="item.backgroundImage"
                  show-loader
                  :preview="false"
                  fit="cover"
                  alt="活动图片"
                >
                </a-image>
                <div class="overlay">
                  <div class="box-full flex-col-center">
                    <div
                      class="flex-center bgfff text333 text-size-14 w-44n h-9n round-18 cursor-pointer"
                      @click="onPreview(item)"
                    >
                      <icon-eye style="font-size: 20px" />
                      <span class="ml-4">预览</span>
                    </div>
                    <div
                      class="flex-center bg-theme textfff text-size-14 w-44n h-9n round-18 mt-8 cursor-pointer"
                      @click="onChange(item.id)"
                    >
                      <span class="text-size-20" v-if="item.id == checkedValue">✔</span>
                      <span class="ml-4">{{ item.id != checkedValue ? '选择' : '当前选择' }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <a-card-meta>
              <template #title>
                <dl class="card_title">
                  <dt class="flex flex-a-c text-overflow-1">
                    <SourceType class="mr-5" :info="{ shopType: 0, platformId: item.platformId }"></SourceType>
                    <p class="text-overflow-1">{{ item.title || '暂无标题' }}</p>
                  </dt>
                  <dd class="text-size-14 text666 mt-10 mb-10 text-overflow-1">{{ item.content || '暂无描述' }}</dd>
                </dl>
              </template>
              <template #description>
                <div class="flex flex-a-c mt-10">
                  <a-tag bordered color="orange" style="flex-shrink: 0" size="small" v-if="item.status == 1"
                    >未开始</a-tag
                  >
                  <a-tag bordered color="green" style="flex-shrink: 0" size="small" v-if="item.status == 2"
                    >进行中</a-tag
                  >
                  <a-tag bordered style="flex-shrink: 0" size="small" v-if="item.status == 3">已结束</a-tag>

                  <div class="ml-10 text-size-12">{{ item.startAt }} - {{ item.endAt }}</div>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </div>
      </a-spin>
    </div>
    <a-empty v-if="!loading && tableData.length == 0 && !firstLoad.value" />
    <div class="arco-table-pagination">
      <a-pagination
        :total="pagination.total"
        :page-size="pagination.pageSize"
        size="small"
        show-total
        show-page-size
        show-jumper
        @change="changeCurrent"
        @page-size-change="changePageSize"
      />
    </div>
  </div>
</template>
<script setup>
import { unionActivityAdminList, linkSelect } from '@/apis'
import { deleteEmpty } from '@/utils/common'
import { usePagination, usePlatform } from '@/hooks'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const loading = ref(false)
const tableData = ref([])
const checkedValue = ref()
const firstLoad = ref(true)
const listParams = reactive({
  page: 1,
  size: 10,
  platformId: undefined,
  status: 2,
  activityType: undefined, //活动类型 1. 联盟采集 2. 总后台添加 3. 应用添加
  keyword: undefined
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })
const { platformList, getPlatformList } = usePlatform()
getPlatformList()
// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const res = await unionActivityAdminList(deleteEmpty(listParams))
    tableData.value = res.data.data
    if (firstLoad.value) firstLoad.value = false
    setTotal(res?.data?.total || 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  if (e == 1) firstLoad.value = true
  getTableData()
}
const changePageSize = (e) => {
  pagination.pageSize = listParams.size = e
  getTableData()
}

// 搜索重置
const onResetSearch = () => {
  listParams.keyword = listParams.platformId = listParams.activityType = undefined
  changeCurrent(1)
}

watch(
  () => props.displayInfo,
  (newValue) => {
    if ((newValue.typeId == 7 || newValue.typeId == 15 || newValue.typeId == 16) && newValue.id) {
      checkedValue.value = [Number(newValue.id)]
      listParams.id = newValue.id
    } else {
      checkedValue.value = undefined
    }
    listParams.activityType = newValue.currentId == 7 ? 2 : newValue.currentId == 15 ? 1 : 3
    changeCurrent(1)
  },
  { deep: true, immediate: true }
)

// 点击选择
const onChange = async (id) => {
  if (checkedValue.value == id) {
    emit('handleCheck')
    return
  }
  const itemData = tableData.value.find((item) => {
    return id === item.id
  })
  const res = await linkSelect({
    rule: props.tabCurrentInfo.rule,
    isLogin: props.tabCurrentInfo?.isLogin ?? undefined,
    param: {
      activityId: itemData.id,
      id: itemData.id,
      title: itemData.title,
      platformId: itemData.platformId
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>
<style lang="scss" scoped>
.unionActivity {
  height: 100%;
  overflow: hidden;
  margin: 0 $margin;
  padding: $padding 0;
  background: var(--color-bg-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .card_title {
    border-bottom: solid 1px #eee;
  }
  .card_wrapper {
    flex-wrap: wrap;
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3); /* 设置遮罩层的颜色和透明度 */
      display: none; /* 初始时隐藏遮罩层 */
    }
    .card_item:hover .overlay {
      display: block; /* 鼠标放上去时显示遮罩层 */
    }
    .card_item {
      &.checked {
        border-color: rgb(var(--primary-6));
        box-shadow: 0px 0px 10px 0px rgb(var(--primary-4));
      }
    }
  }
  :deep(.arco-image-overlay) {
    height: 200px;
  }
}
</style>
